import React from "react";
import { Button, Checkbox, Tooltip, Tree } from "antd";
import DocFiles from "./docFiles";
const { TreeNode } = Tree;
import { formatMessage } from 'umi-plugin-react/locale';

class KnowledgeCheckBox extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			expandedKeys: [],
			autoExpandParent: true,
			checkedKeys: [],
			selectedKeys: [],
		};
	}
	onExpand = (expandedKeys) => {
		this.setState({
			expandedKeys,
			autoExpandParent: false,
		});
	};

	onCheck = (checkedKeys) => {
		this.setState({ checkedKeys }, () => {
			this.props.onCheckListChange(checkedKeys, this.props.type);
		});
	};

  openDocModal = (e,id) => {
    e.stopPropagation()
    this.DocFiles.initModal(id)
  }

	renderTreeNodes = (data) =>
		data.map((item) => {
			if (item.children) {
				return (
					<TreeNode title={this.props.type == 'file' ? <span>{item.name}<Button size="small" style={{marginLeft:15}} type="link" onClick={e => this.openDocModal(e,item.id)}>{formatMessage({ id: 'knowledgeConfig.seeDocument' })}</Button></span> : item.name} key={item.id} dataRef={item}>
						{this.renderTreeNodes(item.children)}
					</TreeNode>
				);
			}
			return <TreeNode key={item.id} title={this.props.type == 'file' ? <span>{item.name}<Button size="small" style={{marginLeft:15}} type="link" onClick={e => this.openDocModal(e,item.id)}>{formatMessage({ id: 'knowledgeConfig.seeDocument' })}</Button></span> : item.name} {...item} />;
		});

	render() {
		const { title, indeterminate, list, checkData, checkAllData, onCheckAllChange, onCheckListChange, type, } = this.props;

		return (
			<div>
				<div style={{ padding: "10px 10px 10px 30px" }} className={this.props.type == 'file' ? 'fileCheckTree' : ''}>
					<Tree
						checkable
						onExpand={this.onExpand}
						expandedKeys={this.state.expandedKeys}
						autoExpandParent={this.state.autoExpandParent}
						onCheck={this.onCheck}
						checkedKeys={checkData}
						selectedKeys={this.state.selectedKeys}
					>
						{this.renderTreeNodes(list)}
					</Tree>
				</div>

        <DocFiles onRef={ref => this.DocFiles = ref} />
			</div>
		);
	}
}

export default KnowledgeCheckBox;
